<!-- 家庭成员 -->
<template>
  <publicPage>
    <scroll-view scroll-y class="familyListPage">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="disFlxAC pl-15 forBox"
        :class="{ 'mt-15': index === 1 }"
        @click="changeUser(item)"
      >
        <!-- <view class="pr-15">
          <image src="@/static/image/image220701(14).png" style="width:40rpx;height:40rpx;" />
          <image src="@/static/image/image220701(15).png" style="width:40rpx;height:40rpx;" />
        </view> -->
        <view style="flex: 1">
          <view class="py-12">
            <text>{{ item.username || '请完善您的信息' }}</text>
            <text class="pl-8">{{ item.sex == "0" ? "男" : "女" }}</text>
            <text class="px-8">{{ calculate(item) }}</text>
            <text v-if="index === 0" class="default">本人</text>
          </view>
          <view class="py-12">
            <text class="pr-20">手机号</text>
            <text>{{ item.userphone || '-' }}</text>
          </view>
        </view>
        <view
          class="disFlxAC px-15 py-20"
          style="flex-shrink: 0"
          @click.stop="_goEdit(item)"
        >
          <image
            src="@/static/image/image220701(16).png"
            style="width: 34rpx; height: 34rpx"
          />
          <text class="fz-14 color8 pl-5">编辑</text>
        </view>
      </view>
    </scroll-view>

    <view class="px-15 py-15 fexdBtn">
      <u-button
        type="primary"
        text="添加成员"
        :customStyle="{
          fontSize: '32rpx',
          borderRadius: '20rpx',
          height: '88rpx',
        }"
        :throttleTime="500"
        @click="goPage('/pagesC/family/familyDetails')"
      ></u-button>
    </view>
  </publicPage>
</template>

<script>
const dayjs = require("dayjs");
import userApi from "@/api/user";

export default {
  data() {
    return {
      isChange: false, // 是否为选择模式
      list: [],
    };
  },
  onLoad(options) {
    if(options.isChange){
      this.isChange = Boolean(options.isChange)
    }
  },
  onShow() {
    this.getList();
  },
  methods: {
    getList() {
      userApi.getFamilyList().then(res=>{
        this.list = res.data
        this.list.unshift({
          username: this.$store.state.userInfo.userName,
          sex: this.$store.state.userInfo.sex,
          birthday: this.$store.state.userInfo.birthday,
          userphone: this.$store.state.userInfo.mobile
        })
      })
    },
    // 计算显示年龄
    calculate(item) {
      if (!item.birthday) return;
      const a = dayjs(item.birthday);
      const b = dayjs();
      return `${-a.diff(b, "year")}岁`;
    },
    // 去编辑
    _goEdit(item){
      if(item.id){
        this.$store.commit("SET_SESSIONOBJ", item);
        this.goPage(`/pagesC/family/familyDetails?id=${item.id}`)
      }else{
        this.goPage('/pagesC/myInfo/index')
      }
    },
    // 选择家庭成员
    changeUser(item){
      if(this.isChange){
        this.$store.commit("SET_SESSIONOBJ", item.id ? item : {});
        this.goBack()
      }
    }
  },
};
</script>
<style lang='scss' scoped>
.familyListPage {
  height: calc(100% - 220rpx);
  .forBox {
    background-color: #ffffff;
    font-size: 32rpx;
  }
  .forBox + .forBox {
    border-top: solid 1px #f5f5f5;
  }
  .default {
    color: #ff6b6b;
    border-radius: 10rpx;
    border: solid 1px #ff6b6b;
    padding: 4rpx 8rpx;
  }
}
.fexdBtn {
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 0;
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
}
</style>